<template>
  <div>
    <ul class="order-lists" ref="infiniteBox" @click="deleteOrder">
      <li class="order-child" v-for="(list, index) in lists" :key="index" :data-id="list.order_id">
        <div class="avatar">
          <router-link :to="'/mine/order/' + list.order_id">
            <img :src="list.pic">
          </router-link>
        </div>
        <router-link :to="'/mine/order/' + list.order_id" class="info">
          <h3 class="title">{{list.name}}</h3>
          <p class="time">{{list.order_time}}</p>
          <p class="price">￥{{list.total_money}}</p>
        </router-link>
        <div class="state" v-if="list.status === '待审核'">
          <p>{{list.status}}</p>
        </div>
        <div class="state" v-else>
          <p>{{list.status}}</p>
          <input name="delete" class="delete" type="button" value="删除订单" v-if="list.status === '已完成'">
        </div>
      </li>
    </ul>
    <div class="placeholder"></div>
    <div class="none" v-if="isNothing">
      <img :src="nothingImage">
      <p>暂时还没有订单，<router-link to="/service">去逛逛店铺</router-link></p>
    </div>
    <div class="loading" v-if="isLoading">
      <div class="circular">
        <svg class="anim-rotate" width="40" height="40">
          <circle class="anim-circle" cx="20" cy="20" r="13" fill="#f5f5f5" stroke="#72a5ef" stroke-width="3"></circle>
        </svg>
      </div>
    </div>
    <footer>
      <input class="footer-fullW-bt" type="button" value="返回" @click="back">
    </footer>
  </div>
</template>
<script>
  // 此页面为 全额订单列表
  import nothing from './img/none.png'
  import $ from 'edom'

  export default {
    name: 'order',
    data () {
      return {
        // 标题
        title: '订单列表',
        // 没有订单
        isNothing: false,
        // 没有订单应该显示的图片
        nothingImage: nothing,
        // 当前的页码
        page: 1,
        // 最大的页码
        maxPage: 2,
        // 是否处于获取数据中
        busy: false,
        // 显示loading
        isLoading: false,
        // 订单数据
        lists: [],
        // 窗口高度
        wHeight: window.innerHeight,
        // 滚动区域高度
        scrollHeight: null,
        // 触发距离
        distance: 10
      }
    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      getOrderList () {
        if (this.page > this.maxPage) {
          window.removeEventListener('scroll', this.scrollEvent)
          return
        }
        this.isLoading = true
        this.axios.post('/api/order/lists', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token,
          page: this.page
        }).then((res) => {
          let data = res.data
          if (data.code !== 200) {
            this.isLoading = false
            this.isNothing = true
            return
          }
          let desc = data.desc
          this.lists = this.lists.concat(desc.list)
          this.maxPage = desc.max_page
          this.page++
          this.$nextTick(() => {
            this.isLoading = false
            this.busy = false
          })
        })
      },
      deleteOrder (event) {
        let target = event.target
        let targetName = target.name
        if (!targetName || targetName !== 'delete') {
          return
        }
        let orderTarget = target.parentNode.parentNode
        let orderId = orderTarget.getAttribute('data-id')
        $().Mconfirm({
          desc: '确定删除吗？',
          confirmBt: () => {
            this.deleEvent(orderId, orderTarget)
          }
        })
      },
      deleEvent (orderId, orderTarget) {
        this.axios.post('/api/order/del_order', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token,
          order_id: orderId
        }).then((res) => {
          let data = res.data
          if (data.code !== 200) {
            $().Mnews(data.desc, 2000)
            return
          }
          orderTarget.style.display = 'none'
        })
      },
      scrollEvent () {
        let scrollTop = document.body.scrollTop
        if (scrollTop + this.wHeight - this.distance > this.scrollHeight && !this.busy) {
          this.busy = true
          this.getOrderList()
        }
      }
    },
    created () {
      this.setTitle(this.title)
      // 获取订单列表
      this.getOrderList()
    },
    updated () {
      if (this.page === 2) {
        this.scrollHeight = this.$refs.infiniteBox.offsetHeight
        this.$nextTick(() => {
          window.addEventListener('scroll', this.scrollEvent)
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  @function rem($px) {
    @return $px / 75 * 1rem;
  }
  .order-lists{
    background: #f5f5f5;
    .order-child{
      background: #fff;
      margin-bottom: rem(10);
      padding: rem(30) rem(24);
      display: flex;
      .avatar{
        img{
          margin-right: rem(17);
          width: rem(80);
          height: rem(80);
          border-radius: 6px;
        }
      }
      .info{
        display: block;
        flex: 1;
        .title{
          margin-bottom: rem(10);
          font-size: rem(28);
          color: #141414;
        }
        .time{
          margin-bottom: rem(10);
          font-size: rem(22);
          color: #999;
        }
        .price{
          font-size: rem(28);
          color: #c80606;
          font-weight: 600;
        }
      }
      .state{
        font-size: rem(24);
        color: #141414;
        p{
          text-align: right;
        }
        .delete{
          margin-top: rem(90);
          width: rem(135);
          height: rem(50);
          line-height: rem(50);
          border: 1px solid #e1e1e1;
          background: #fff;
        }
      }
    }
  }
  .placeholder{
    height: rem(200);
    background: #f5f5f5;
  }
  .none{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: rem(90);
    background: #fff;
    font-size: rem(28);
    color: #333;
    text-align: center;
    img{
      display: block;
      margin: rem(150) auto rem(40) auto;
      width: rem(340);
      height: rem(300);
    }
    a{
      color: #72a5ef;
    }
  }
  footer{
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    height: rem(100);
  }
  .loading{
    position: fixed;
    top: 40%;
    left: 0;
  }
</style>
